<template>
  <div class="user-container">
    <div class="header">
      <van-image
        width="60"
        height="60"
        fit="cover"
        round
        :src="userInfo.photo"
      />
      <h2>
        {{ userInfo.name }}<br />
        <van-tag color="#fff" text-color="#0098fa">{{
          userInfo.birthday
        }}</van-tag>
      </h2>
    </div>
    <van-row gutter="20">
      <van-col span="8"
        ><van-icon name="newspaper-o" color="#0098fa" /><span
          >我的作品</span
        ></van-col
      >
      <van-col span="8"
        ><van-icon name="like-o" color="#0098fa" /><span
          >我的收藏</span
        ></van-col
      >
      <van-col span="8"
        ><van-icon name="tosend" color="#ff5867" /><span
          >阅读历史</span
        ></van-col
      >
    </van-row>
    <van-cell-group>
      <van-cell is-link title="编辑资料" icon="edit" />
      <van-cell is-link title="小艾同学" icon="chat-o" @click="$router.push('/student')"/>
      <van-cell is-link title="系统设置" icon="setting-o" />
      <van-cell is-link title="退出登录" icon="warning-o" @click="logout" />
    </van-cell-group>
  </div>
</template>

<script>
import { getUserInfo } from './user.js'
import { removeToken } from '@/utils/token.js'

export default {
  name: 'user',
  data () {
    return {
      userInfo: {}
    }
  },
  created () {
    getUserInfo().then(res => {
      console.log(res)
      this.userInfo = res.data.data

      this.$store.commit('updateUserInfo', res.data.data)
    })
  },
  methods: {
    logout () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '确认要退出登录吗？'
        })
        .then(() => {
          // on confirm
          removeToken()
          this.$router.push('/login')
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="less">
.user-container {
  .header {
    background-color: #0098fa;
    height: 100px;
    display: flex;
    align-items: center;
    .van-image {
      padding: 0 10px;
    }
    h2 {
      font-size: 18px;
      color: #fff;
      font-weight: 400;
    }
  }

  .van-row {
    .van-col {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    span {
      font-size: 14px;
      text-align: center;
      margin: 10px 0 10px 0;
    }
    .van-icon {
      font-size: 25px;
    }
  }
}
</style>
